<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <th:block th:include="public/include :: header" />
 	<meta name="keywords" th:content="${biz.cmsCate.keyWord}">
	<meta name="description" th:content="${biz.cmsCate.cateDesc}">
    <title>[[${biz.cmsCate.cateTitle}]]</title>
    
    <th:block th:include="public/include :: swiper-css" />
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/headfoot.css" />
    <link rel="stylesheet" href="/css/index.css">
    
    <link rel="stylesheet" href="/css/second.css">
</head>

<body class="huibg">
    <!--头部部分-->
    <div class="heads">
    </div>
    
    <div class="main-md">
        <div class="bgff pad20">
            <div class="se_tit">
                <h2 class="fnt_18 col_666">教育视频</h2>
            </div>
            <div class="ship">
                <ul id="pageData">
                </ul>
                
                <div style="clear: both;" id="pageNav">
	                <div class='mypage  ph_dis' >
	                </div>
	                <div class='mypage  pc_dis' >
	                    <a href="#">&lt;</a>
	                    1/10
	                    <a href="#">&gt;</a>
	                </div>
            	</div>
            </div>
        </div>
    </div>
    
    <!-- 友情链接 -->
    <div class="flink">
    </div>
    <!--页尾-->
    <div class="foots">
    </div>
    
    <th:block th:include="public/include :: footer" />
    <th:block th:include="public/include :: swiper-js" />
    <th:block th:include="public/include :: layer-js" />
    <div th:replace="public/include :: SuperSlide-js" ></div>
    
    <script src="/js/index.js"></script>
    <script>
        var swiper = new Swiper('#banner', {
            autoplay: 3000,
            speed: 500,
            loop: true,
            lazyLoading: true,
            // 如果需要分页器
            pagination: '.swiper-pagination',
            paginationClickable: true
        });
        var windowWidth = $(window).width();
        if (windowWidth < 768) {

        }
        if (windowWidth >= 768) {

        }
        $('.main_top_tit span').click(function () {
            var liindex = $('.main_top_tit span').index(this);
            console.log(liindex);
            $(this).addClass('active').siblings().removeClass('active');
            $('.main_rt_con .main_rt_item').eq(liindex).fadeIn(150).siblings(".main_rt_item").hide();
        });
        jQuery(".picMarquee-left").slide({
            mainCell: ".bd ul",
            autoPlay: true,
            effect: "leftMarquee", vis: 7, interTime: 50, trigger: "click"
        });
        
        $(function() {
	        $(".heads").load("/head",function(){
	        	 //栏目选中
		        $(".main-md ul li").removeClass("active");
		        $("#nav[[${biz.cmsCate.cateCode}]]").addClass("active");
	        });
	        $(".foots").load("/foot.html");
	        $(".flink").load("/flink.html");
	        
	        loadData(1);
        });
        
        
        var cateId = [[${biz.cmsCate.cateId}]];
    	var pageSize = [[${biz.cmsCate.showPageCount}]];
    	var pageDataUrl = ctx + "pub/video/pgdata/"+cateId+"/"+pageSize+"/";
    	
        //加载数据
        function loadData(pagenum){
        	var loadIndex = layer.load(1,{shade: [0.5, '#000'] });
      		//加载数据
      		$.get(pageDataUrl+pagenum,{},function(data){
      			layer.close(loadIndex);
      			console.log("--resp--"+data);
      			if(data.code==500){
      				console.log("出错了");
      			}else if(data.code==100){//成功
      				//循环赋值
      				$("#pageData").html("");
      			
      				var itemHtml="";
      				$.each( data.data.list, function(i, item){
      					itemHtml=' <li><a href="javascript:playVideo('+item.cevId+')"> ';
      					itemHtml+=' <img src="'+item.videoImg+'" alt="'+item.cevDesc+'">';
     					itemHtml+=' <div class="ship_hide">';
     					itemHtml+=' <i class="iconfont icon-bofang2 col_fff"></i>';
     					itemHtml+=' <h4 class="col_fff cent fnt_14">'+item.cevTitle+'</h4>';
      					itemHtml+=' <p></p></div></a></li>';
                      
      					console.log("输出："+itemHtml);
      		    		$("#pageData").append(itemHtml);
      		    	});
      	    		//分页条
      	    		buildPageBar(data.data);
      			}else{//失败
      				console.log("...");
      			}
      		});
      	}
        	
         function buildPageBar(barData){
      	   var item = "";
      	   item +='<div class="mypage  ph_dis">';
      	   item +='<a href="javascript:loadData('+(barData.prePage==0?"1":barData.prePage)+')" id="previd">上一页</a>';
      	   
      	   console.log("分页条："+barData.navigatepageNums.length);
      	   for (let i = 0; i < barData.navigatepageNums.length; i++) {
      		   var pn = barData.navigatepageNums[i];
                 item +='<a href="javascript:loadData('+pn+')" class="'+( pn==barData.pageNum?"linking":"unlink" )+'">'+pn+'</a>';
             }
      	   
      	   item +='<a href="javascript:loadData('+barData.nextPage+')"" id="nextid">下一页</a>';
      	   item +='</div>';
      	   console.log("分页条的bar："+item);
      	   $("#pageNav").html(item);
         }
        
         //播放视频
         function playVideo(cevId){
        	 var openUrl = ctx+"page/vplay/"+cevId;
        	 //弹出框
        	 layer.open({
        		  type: 2,
        		  title: '视频播放',
        		  shadeClose: false,
        		  shade: 0.8,
        		  area: ['90%', '90%'],
        		  content: openUrl //iframe的url
        	 }); 
         }
         
    </script>
</body>

</html>